﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Principal.Master" AutoEventWireup="true"
    CodeBehind="graph.aspx.cs" Inherits="SISREBBVA.graph" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var info = document.getElementById('ContentPlaceHolder1_hidden').value;
            var datos = info.split('@');
            //alert(datos);
            var array = [['ID', '', '', 'Comercio', 'Compra Media(€)']];
            var j = 0;
            for (var i = 0; i < datos.length - 1; i++) {
                //array.push(4);
                var a = datos[i].split('#');
                array.push([a[0], i + 1, i + 1, a[0], parseFloat(a[1])]);
                j++;
            }

            array.push(['', j + 1, j + 1, 'Unknown', 0]);

            var data = google.visualization.arrayToDataTable(array);

            var options = {
                title: 'Valor Promedio por Sectores según tus preferencias.',
                hAxis: { title: '' },
                vAxis: { title: '' },
                bubble: { textStyle: { fontSize: 11} }
            };

            var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="panel" style="width: 70%; float: left;">
        <h3 class="panel-title">
            Visualización</h3>
        <div class="panel-content">
            <div id="chart_div" style="width: 500px; height: 300px;"></div>
        </div>
    </div>
    <div class="panel" style="width: 25%; float: left; margin-left: 2%;">
        <h3 class="panel-title">
            Descripción</h3>
        <div class="panel-content">
        El gráfico adjunto, muestra el promedio de pago en las provincias más cercanas ti y de acuerdo a las categorías registradas en tu perfil.

Con este resumen podrás tener una idea referencial del promedio de gasto que gente muy cercana a tu provincia realiza y así controlar el presupuesto para tus compras.
        </div>
    </div>
    <asp:HiddenField ID="hidden" runat="server" />
</asp:Content>
